<template>
    <div>
        <el-form ref="skuform" label-width="80px">
            <el-form-item label="SPU名称">{{ spu.spuName }}</el-form-item>
            <el-form-item label="SKU名称">
                <el-input placeholder="请输入SKU名称" v-model="skuInfo.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input placeholder="请输入价格" type="number" v-model="skuInfo.price"></el-input>
            </el-form-item>
            <el-form-item label="重量(千克)">
                <el-input placeholder="请输入重量" v-model="skuInfo.weight"></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input placeholder="请输入规格描述" type="textarea" rows="3" v-model="skuInfo.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true" label-width="80px">
                    <el-form-item :label="attr.attrName" v-for="(attr, index) in attrInfoList" :key="attr.id">
                        <el-select placeholder="请选择" v-model="attr.idAndValueId">
                            <el-option :label="val.valueName" :value="`${attr.id}:${val.id}`"
                                v-for="val in attr.attrValueList" :key="val.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true" label-width="80px">
                    <el-form-item :label="sale.saleAttrName" v-for="sale in spuSaleAttrList" :key="sale.id">
                        <el-select placeholder="请选择" v-model="sale.idAndValueId">
                            <el-option :label="val.saleAttrValueName" :value="`${sale.id}:${val.id}`"
                                v-for="val in sale.spuSaleAttrValueList" :key="val.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片列表">
                <el-table style="width: 100%;" border :data="spuImageList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="80"></el-table-column>
                    <el-table-column prop="prop" label="图片" width="width">
                        <template slot-scope="{ row, $index }">
                            <img :src="row.imgUrl" style="width:100px;height:100px">
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgName" label="名称" width="width"> </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template slot-scope="{ row, $index }">
                            <el-button type="primary" v-if="row.isDefault == 0"
                                @click="changeDefault(row)">设置默认</el-button>
                            <el-button v-else>默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveSKU">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "SKUForm",
    data() {
        return {
            spu: {},
            categoryForm: {
                category1Id: '',
                category2Id: '',
                category3Id: '',
            },
            skuInfo: {
                //第一类收集的数据：父组件给的数据
                category3Id: 0,
                spuId: 0,
                tmId: 0,
                //第二类：需要通过数据双向绑定v-model收集
                skuName: "",
                price: 0,
                weight: "", //重量
                skuDesc: "",
                //第三类：需要自己书写代码
                //默认图片
                skuDefaultImg: "",
                //收集图片的字段
                skuImageList: [
                    // {
                    //   id: 0,
                    //   imgName: "string",
                    //   imgUrl: "string",
                    //   isDefault: "string",
                    //   skuId: 0,
                    //   spuImgId: 0,
                    // },
                ],
                //平台属性
                skuAttrValueList: [
                    // {
                    //   attrId: 0,
                    //   valueId: 0,
                    // },
                ],
                //销售属性
                skuSaleAttrValueList: [
                    // {
                    //   id: 0,
                    //   saleAttrId: 0,
                    //   saleAttrName: "string",
                    //   saleAttrValueId: 0,
                    //   saleAttrValueName: "string",
                    //   skuId: 0,
                    //   spuId: 0,
                    // },
                ],


            },
            spuImageList: [],
            spuSaleAttrList: [],
            attrInfoList: [],
            imageList: [],  //选中的图片列表，未包含isDefault
        }
    },
    methods: {
        //初始化数据
        async initData(spu, categoryForm) {
            this.spu = spu;
            this.categoryForm = categoryForm;
            this.skuInfo.category3Id = spu.category3Id;
            this.skuInfo.spuId = spu.id;
            this.skuInfo.tmId = spu.tmId;
            //获取图片的数据
            let result = await this.$API.spu.reqSpuImageList(spu.id);
            if (result.code == 200) {
                result.data.forEach(m => {
                    m.isDefault = 0;
                })
                this.spuImageList = result.data;
            }
            //获取销售属性的数据
            result = await this.$API.spu.reqSpuSaleAttrList(spu.id);
            if (result.code == 200) {
                this.spuSaleAttrList = result.data;
            }
            //获取平台属性的数据
            result = await this.$API.spu.reqAttrInfoList(categoryForm.category1Id, categoryForm.category2Id, categoryForm.category3Id);
            if (result.code == 200) {
                this.attrInfoList = result.data;
            }

        },
        //当选择项发生变化时会触发该事件
        handleSelectionChange(params) {
            this.imageList = params;
        },

        //保存SKU 
        async saveSKU() {
            //整体需要提交的数据
            const { skuInfo, spuSaleAttrList, attrInfoList, imageList } = this;
            //销售属性
            skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((pre, current) => {
                if (current.idAndValueId) {
                    const [saleAttrId, saleAttrValueId] = current.idAndValueId.split(':');
                    pre.push({ saleAttrId, saleAttrValueId });
                }
                return pre;
            }, []);
            //平台属性            
            skuInfo.skuAttrValueList = attrInfoList.reduce((pre, current) => {
                if (current.idAndValueId) {
                    const [attrId, valueId] = current.idAndValueId.split(':');
                    pre.push({ attrId, valueId });
                }
                return pre;
            }, []);

            //选中的图片列表
            skuInfo.skuImageList = imageList.map(m => {
                return {
                    imgName: m.imgName,
                    imgUrl: m.imgUrl,
                    isDefault: m.isDefault,
                    spuImgId: m.id,
                }
            });
            //发请求
            let result = await this.$API.spu.reqAddSku(skuInfo);
            if (result.code == 200) {
                this.$message({ type: 'success', message: '添加SKU成功' })
                this.$emit("changeScene", { scene: 0, flag: "" });
            }


        },
        //取消
        cancel() {
            Object.assign(this._data, this.$options.data());
            this.$emit("changeScene", { scene: 0, flag: "" });
        },
        //设置图片为默认
        changeDefault(row) {
            this.spuImageList.forEach(item => {
                item.isDefault = 0;
            });
            row.isDefault = 1;
            this.skuInfo.skuDefaultImg = row.imgUrl;
        }
    },

};
</script>

<style lang="scss" scoped></style>
